<template>
  <div>
    <gm-nav></gm-nav>
    <div class="big-container">
      <el-carousel trigger="click" height="500px">
        <el-carousel-item
          v-for="item in imgArr"
          :key="item.id"
          class="el-carousel__container"
        >
          <div class="img-box">
            <a @click="goVideo(item)" href="#/video">
              <img :src="item.image" alt="" />
              <div class="tip" v-if="item.show">
                <h3>{{ item.title }}</h3>
                <p>{{ item.text }}</p>
              </div>
            </a>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="main-container">
        <div class="post-left">
          <div class="head-tab">
            <ul>
              <li @click="addClick(0, 'gmNew')">
                <span :class="index == 0 ? 'active' : ''">最新推荐</span>
              </li>
              <li @click="addClick(1, 'gmHot')">
                <span :class="index == 1 ? 'active' : ''">热门排行</span>
                <span></span>
              </li>
              <li @click="addClick(2, 'gmGood')">
                <span :class="index == 2 ? 'active' : ''">星级精选</span>
              </li>
              <li @click="addClick(3, 'gmCasual')">
                <span :class="index == 3 ? 'active' : ''">随便看看</span>
              </li>
            </ul>
          </div>
          <div class="tab-content">
            <component :is="compName" :dataObj="dataObj"></component>
          </div>
        </div>
        <div class="post-right">
          <div class="img-box">
            <img
              src="https://oss-xpc0.xpccdn.com/Upload/edu/2020/03/265e7c9234d56d0.jpg"
              alt=""
            />
          </div>
          <div class="hot-box">
            <h4 class="title">热门频道</h4>
            <div class="tages">
              <span>电影自习室</span>
              <span>创意</span>
              <span>旅行</span>
              <span>广告</span>
              <span>爱情</span>
              <span>生活</span>
              <span>运动</span>
              <span>励志</span>
              <span>科幻</span>
              <span>预告</span>
            </div>
          </div>
          <div class="hot-box">
            <h4 class="title">热门活动<a href="javascript:;">更多活动+</a></h4>
            <ul>
              <li>
                <a href="javascript:;">
                  <img
                    src="https://cs.vmovier.com/Uploads/Banner/2021/11/02/6180f9726254f.jpg"
                    alt=""
                  />
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <img
                    src="https://cs.vmovier.com/Uploads/Banner/2021/09/23/614bf6bbe87f3.jpg"
                    alt=""
                  />
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <img
                    src="https://cs.vmovier.com/Uploads/Banner/2021/07/09/60e7f34ee460e.jpg"
                    alt=""
                  />
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <img
                    src="https://cs.vmovier.com/Uploads/Banner/2021/04/16/60798e325fbbb.jpg"
                    alt=""
                  />
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <img
                    src="https://cs.vmovier.com/Uploads/Banner/2021/11/11/618c88a071107.jpg"
                    alt=""
                  />
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <img
                    src="https://cs.vmovier.com/Uploads/Banner/2020/12/28/5fe9cb8343b38.jpg"
                    alt=""
                  />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <gm-footer></gm-footer>
  </div>
</template>

<script>
import gmNav from '../components/gmNav.vue'
import gmNew from "@/pages/children/gmNew.vue";
import gmHot from "@/pages/children/gmHot.vue";
import gmGood from "@/pages/children/gmGood.vue";
import gmCasual from "@/pages/children/gmCasual.vue";
import gmFooter from "@/components/gmFooter.vue";

import { mapMutations } from "vuex";

export default {
  name: "First",
  components: {
    gmNav,
    gmNew,
    gmHot,
    gmGood,
    gmCasual,
    gmFooter,
  },
  data() {
    return {
      imgArr: [],
      compName: "gmNew",
      index: 0,
      dataObj: {},
    };
  },
  methods: {
    ...mapMutations(["setVideo"]),
    addClick(i, cn) {
      this.index = i; // 设置索引值
      this.compName = cn; // 设置组件名称
    },
    goVideo(videoInfo) {
      this.setVideo(videoInfo);
      this.$router.push("/video");
    },
  },
  mounted() {
    let url = "data/ckData.json";
    let gms = axios.get(url);
    gms.then((res) => {
      this.imgArr = res.data.imgArr;
      this.dataObj = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.big-container {
  width: 1440px;
  margin: 0 auto;
  padding-bottom: 30px;
  a {
    display: block;
    position: relative;
    img {
      display: block;
      width: 1440px;
    }
    .tip {
      position: absolute;
      bottom: 80px;
      right: 140px;
      z-index: 9;
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      h3 {
        font-size: 22px;
        font-weight: bold;
        width: 500px;
        line-height: 30px;
      }
      p {
        margin-top: 20px;
        max-width: 500px;
        height: 80px;
      }
    }
  }
  .main-container {
    width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
    .post-left {
      width: 860px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      background: #fff;
      .head-tab {
        background-color: #f9f9f9;
        border-bottom: 1px solid #ddd;
        ul {
          display: flex;
          height: 50px;
          li {
            width: 116px;
            border-right: 1px solid #ddd;
            span {
              display: block;
              text-align: center;
              line-height: 50px;
              font-size: 14px;
              cursor: pointer;
              &.active {
                border-bottom: 1px solid #fff;
                background: #fff;
              }
            }
          }
          li:nth-child(2) {
            position: relative;
            span:nth-child(2) {
              background-image: url(https://www.vmovier.com/Public/Home/images/hot.png);
              background-repeat: no-repeat;
              width: 18px;
              height: 14px;
              position: absolute;
              top: 19px;
              right: 9px;
            }
          }
        }
      }
      .tab-content {
        padding: 0 30px 30px 30px;
        background: #fff;
      }
    }
    .post-right {
      width: 300px;
      .img-box {
        margin-bottom: 20px;
        img {
          width: 100%;
        }
      }
      .hot-box {
        padding: 15px 20px 40px;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        .title {
          font-size: 16px;
          color: #393939;
          border-left: 4px solid #2689ff;
          margin-left: -22px;
          margin-bottom: 15px;
          padding: 5px 0 5px 18px;
          text-align: left;
          a {
            float: right;
            font-size: 12px;
            color: #666;
            margin-top: 2px;
          }
        }
        .tages {
          margin-left: -8px;
          margin-top: -8px;
          span {
            margin-left: 8px;
            margin-top: 8px;
            display: inline-block;
            vertical-align: top;
            height: 26px;
            line-height: 26px;
            padding: 0 12px;
            background-color: #f1f1f1;
            color: #3498db;
            border-radius: 2px;
            font-size: 12px;
            cursor: pointer;
            &:hover {
              background-color: #3498db;
              color: #fff;
            }
          }
        }
        ul {
          li {
            margin-top: 20px;
            a {
              img {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>